<template>
  <van-nav-bar style="height:52px">
    <template #left>
        <img src="./return1.svg">
        <img src="./touxiang.png" style="width:32px;height: 32px;border-radius: 16px;margin-left: 10px;">
        <span style="color:black;font-weight:600;margin-left: 5px;">Daisy</span>
    </template>
    <template #right>
      <van-button type="primary" size="mini" color="#ec7b67" style="width:55px" @click="support">{{support2}}</van-button>
      <img src="./fenxiang.svg" style="margin-left:10px">
    </template>
  </van-nav-bar>
  <div style="width:100%;background-color: white;color: black;">
    <hr>
    <div style="width:95%;margin:10px auto;">
      <div style="display:inline-block;background-color: #ec7b67;width: 30px; height: 30px;border-radius: 15px 15px 0 15px;text-align: center;color: white;">问</div><div style="display:inline-block;font-size:21px;line-height:50px;text-indent: 7px;">请问丹凤眼适合做开眼角吗？</div>
      <p style="font-size:17px;line-height: 28px;">请大家帮忙看下我这种丹凤眼适合做开眼角吗？会不会不好看？</p>
      <p style="margin-top:15px">
        <img src="./touxiang.png" style="border-radius:8px; height:80px;width: 120px;">
        <img src="./touxiang.png" style="border-radius:8px; height:80px;width: 120px;margin-left: 1%;">
        <img src="./touxiang.png" style="border-radius:8px; height:80px;width: 120px;margin-left: 1%;">
      </p>
      <van-tag round type="primary" size="large" color="#fdf2f0" text-color="#ec7b67" style="margin-top:10px;margin-bottom:20px">开眼角</van-tag>
    </div>
  </div>
  <div style="width:100%;height:90px;background-color:white;position: relative;">
    <button style="width:50%;height:100%;color: black;background-color: white;border: 1px solid #f3f1f0; position: absolute; left: 0px;" @click="collection">
      <div style="float: left;margin-left: 25%;"><img :src=box1.photo></div><div style="float:left;">{{box1.texttext}}</div>
    </button>
    <button style="width:50%;height:100%;color: black;background-color: white;border: 1px solid #f3f1f0; position: absolute; right: 0px;">
      <div style="float: left;margin-left: 25%;"><img src="./添加好友.svg"></div><div style="float:left;margin-left: 2%;">邀请回答</div>
    </button>
  </div>
  <div style="width:100%;background-color:white;color: black;height: 60px;">
    <div style="width:95%; margin:10px auto;">
      <div style="background-color:#82b3cb;width: 30px; height: 30px;border-radius: 15px 15px 0 15px;text-align: center;color: white; float: left;margin-top: 13px;">问</div>
      <div style="font-size:19px;margin-top: 13px;text-indent: 7px;float: left;">共有10条回答</div>
    </div>
  </div>
  <div style="width:100%;background-color:white;color: black;">
      <div style="width:92%;min-height: 70px; display: flex;margin: auto;">
        <div style="flex:0.9;">
          <img src="./touxiang.png" style="width:50px;height:50px;border-radius:25px;margin-top:10px;">
        </div>
        <div style="flex:2.5;">
          <div style="margin-top:10px;">周伟</div>
          <div style="color: #9c9c9c;">北京华睿整形医院 主任医师</div>
        </div>
        <div style="flex:1;">
          <button style="background:none;border:#ec7b67 1px solid;color: #ec7b67; width: 70px;border-radius: 8px;margin-top: 17px;" @click="zixun">咨询</button>
        </div>
      </div>
      <div style="width:92%;margin: auto;">
        可以开一点儿，这样有两个好处，一是将眼角变锐，二是可以调整双眼皮弧形为平扇，改善眼尾上翘。<br>
        可以开一点儿，这样有两个好处，一是将眼角变锐，二是可以调整双眼皮弧形为平扇，改善眼尾上翘。
      </div>
      <div style="width:92%;display: flex;height: 50px;margin: auto;color: #9c9c9c;">
        <div style="flex:1; font-size: 14px;line-height: 30px;">2019-12-23 12:23</div>
        <div style="flex:1; font-size: 14px;line-height: 30px;text-indent: 70%;"><img src="./爱心.svg"><span> 330</span></div>
      </div>
      </div>

  <template v-for="index of 4" :key="index">
    <div style="width:100%;background-color:white;color: black; margin-top: 20px;">
      <div style="width:92%;min-height: 70px; display: flex;margin: auto;">
        <div style="flex:0.9;">
          <img src="./touxiang.png" style="width:50px;height:50px;border-radius:25px;margin-top:10px;">
        </div>
        <div style="flex:2.5;">
          <div style="margin-top:10px;">周伟</div>
          <div style="color: #9c9c9c;">北京华睿整形医院 主任医师</div>
        </div>
        <div style="flex:1;">
          <button style="background:none;border:#ec7b67 1px solid;color: #ec7b67; width: 70px;border-radius: 8px;margin-top: 17px;" @click="zixun">咨询</button>
        </div>
      </div>
      <div style="width:92%;margin: auto;">
        可以开一点儿，这样有两个好处，一是将眼角变锐，二是可以调整双眼皮弧形为平扇，改善眼尾上翘。<br>
        可以开一点儿，这样有两个好处，一是将眼角变锐，二是可以调整双眼皮弧形为平扇，改善眼尾上翘。
      </div>
      <div style="width:92%;display: flex;height: 50px;margin: auto;color: #9c9c9c;">
        <div style="flex:1; font-size: 14px;line-height: 30px;">2019-12-23 12:23</div>
        <div style="flex:1; font-size: 14px;line-height: 30px;text-indent: 70%;"><img src="./爱心.svg"><span> 330</span></div>
      </div>
      </div>
  </template>
  
</template>
  
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import {useRouter} from 'vue-router';
  const router = useRouter();
  const zixun=()=>{
    router.push({
      path:'/chat'
    })
  }
  const box1 = reactive({
    texttext:'添加收藏',
    photo:'/src/views/Details/liebiaotianjia.svg'
  })
  const collection=()=>{
    if(box1.texttext=="添加收藏"){
      box1.texttext='已收藏'
      box1.photo='/src/views/Details/勾勾.svg'
    }else{
      box1.texttext='添加收藏'
      box1.photo='/src/views/Details/liebiaotianjia.svg'
    }
  }

  const support2=ref('+关注')
  const support=()=>{
    if(support2.value=='+关注'){
      support2.value='已关注'
    }else{
      support2.value='+关注'
    }
  }
</script>

<style>

</style>